<template>
  <div id="app">
    
    <table>
      <tr>
        <th><h3>欢迎来到韩枫水果店</h3></th>
      </tr>
      <tr>
        <td>韩枫水果店:苹果10元,500g/1斤,折扣:打骨折(5折)</td>
      </tr>
      <tr>
        <td><span>请输入你要购买的斤数</span> <input type="text" v-model.number="num"> </td>
      </tr>
      <tr>
        <td><button @click="fn">结账~</button></td>
      </tr>
      <tr>
        <td>
          <span>账单:总价</span><span>{{zj}}</span><span>￥元 折后价:</span><span>{{zk}}</span><span>省了</span>{{zj-zk}}<span>￥元</span>
        </td>
      </tr>
    </table>
      <!-- <td>
        <th>韩枫水果店:苹果10元,500g/1斤,折扣:打骨折(5折)</th>
        <tr><span>请输入你要购买的斤数</span><input type="text" name="" id=""></tr>
        <tr><button>结账~</button></tr>
        <tr><span>账单:总价</span><span></span><span>￥元 折后价:</span><span></span><span>省了</span><span></span><span>￥元</span></tr>
      </td> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      num:0,
      zj:0,
      zk:0
    };
  },
  methods: {
    fn(){
      if (this.num<0) {
        return this.num=0
      }
      this.zj=this.num*10
      this.zk=this.num*10*0.5
    }
  },
};
</script>

<style>
table{
  margin: 30px auto;
  border: 1px solid #000;

}
tr td{
  border: 1px solid #000;
}
</style>
